<template>
  <div class="app-container">
    <div class="body-container">
      <el-form :model="queryParams"
               ref="queryForm"
               class="queryForm"
               :inline="true">
        <el-form-item label="日志类型：" prop="menuName">
          <Select v-model="queryParams.type"
                  placeholder="请选择日志类型"
                  :options="recordOptions"
                  @change="selectQuery" />
        </el-form-item>
        <el-form-item>

        </el-form-item>
      </el-form>
      <el-table v-loading="loading"
                border
                :data="recordList">
        <el-table-column label="用户账号"
                         prop="user.userName"
                         :show-overflow-tooltip="true" />
        <el-table-column prop="user.name"
                         label="用户姓名" />
        <el-table-column prop="done"
                         label="日志说明"
                         :show-overflow-tooltip="true" />
        <el-table-column label="记录时间"
                         prop="createTime"
                         :formatter="row => dateFormatter(row)" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="moreRecord(scope.row)">所有日志</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <el-dialog title="所有日志"
               :visible.sync="userRecordsDialog"
               :close-on-click-modal="false"
               width="500px">
      <div v-for="item in userRecords" :key="item._id">
        <span>[{{item.createTime | timeFormat}}]</span>
        <span style="margin: 0 10px">{{item.user.name}}(<span style="color: #F56C6C">{{item.user.userName}}</span>)</span>
        <span>{{item.done}}</span>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="userRecordsDialog = false">关 闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {listRecord, listRecordSelf} from "@/api/system/record";

  export default {
    name: "index",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          type: undefined
        },
        // 日志类型选项
        recordOptions: [],
        // 日志列表
        recordList: [],
        // 当前用户所有日志弹框
        userRecordsDialog: false,
        // 当前用户所有日志
        userRecords: [],
        // 总条数
        total: 0
      }
    },
    created() {
      this.getList()
      this.getDicts('sys_record_type').then(res => {
        this.recordOptions = res.data
      })
    },
    methods: {
      /** 查询数据 */
      getList() {
        this.loading = true
        listRecord(this.queryParams).then(res => {
          this.recordList = res.rows
          this.total = res.total
          this.loading = false
        })
      },
      /** 下拉框搜索 */
      selectQuery(val) {
        if (val) this.queryParams.type = val
        else delete this.queryParams.type
        this.getList()
      },
      /** 查询用户所有日志 */
      moreRecord(row) {
        this.userRecordsDialog = true
        listRecordSelf(row.user._id).then(res => {
          this.userRecords = res.data
        })
      }
    }
  }
</script>

<style lang="scss">
  .queryForm {
    .el-form-item {
      margin-bottom: 10px;
    }
  }
</style>

